import React, { Component } from 'react'
import './App.css'
var bases=[
  {id:1,basename:'昌平⼀库',items:[{id:1,name:'⼩⽶电视5s',count:120},{id:2,name:'华为Mate40',count:35}]},
  {id:9,basename:'怀柔六库',items:[{id:1,name:'九阳⾖浆机',count:40},{id:8,name:'苹果⼿机',count:370},{id:9,name:'⼤疆⽆⼈机',count:170},{id:23,name:'益达⼝⾹糖',count:1370}]},
  {id:6,basename:'顺义三库',items:[{id:1,name:'充电线',count:300},{id:6,name:'洗⾐机',count:30},{id:9,name:'耐克',count:70},{id:3,name:'冰箱',count:10}]}]
var items=[
  [{id:1,name:'⼩⽶电视5s',count:120},{id:2,name:'华为Mate40',count:35}],
  [{id:1,name:'九阳⾖浆机',count:40},{id:8,name:'苹果⼿机',count:370},{id:9,name:'⼤疆⽆⼈机',count:170},{id:23,name:'益达⼝⾹糖',count:1370}],
  [{id:1,name:'充电线',count:300},{id:6,name:'洗⾐机',count:30},{id:9,name:'耐克',count:70},{id:3,name:'冰箱',count:10}]
]
export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       major:'',
       bases:bases,
       items:items,
       me:bases[0],
    }
  }

  _del=(major)=>{
    let items=this.state.me.items.slice(0)
    let index=this.state.items.indexOf(major)
    items.splice(index,1)
    this.setState({items})
  }

_side(base){
  this.setState({me:base})
}
  render() {
    return (
      <div id='App'>
        <div id='top'>
            
              {this.state.me.items.map(item=>{
                return <div id="block">编号:{item.id}<br/>品名：{item.name}<br/>数量：{item.count}<br/>查看详情</div>
            })}
        </div>
        <div id='bottom'>
          <div id='left'>
            <table id='table'>
              <tr>
                <th>id</th>
                <th>品名</th>
                <th>数量</th>
                <th>删除</th>
              </tr>
              {this.state.me.items.map(item=>{
                return <tr>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.count}</td>
                <td><button onClick={(major)=>this._del(major)} style={{backgroundColor:"lightblue"}}>删除</button></td>
              </tr>
            })}
            </table>
          </div>
          <div id='right'>
            {this.state.bases.map(base=>{
              return <p onClick={()=>this._side(base)}>{base.basename}</p>
            })}
          </div>
        </div>       
      </div>
      
    )
  }
}